<template>
  <div>
    <h3 style="padding-left: 50px">个人中心</h3>
    <div class="me_bac">
      <el-form class="login-form" label-position="right">
        <el-form-item label="用户名：" label-width="150px">
          <div>{{ userData.userName }}</div>
        </el-form-item>
        <el-form-item label="邮箱：" label-width="150px">
          <el-input v-model="userData.email" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="企业名称：" label-width="150px">
          <div>{{ userData.company }}</div>
        </el-form-item>
        <el-form-item label="统一社会信用代码：" label-width="150px">
          <div>{{ userData.creditCode }}</div>
        </el-form-item>
        <el-form-item label="企业联系人：" label-width="150px">
          <el-input v-model="userData.companyLinker" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="企业联系人手机号：" label-width="150px">
          <el-input v-model="userData.companyLinkMobile" placeholder="请输入" />
        </el-form-item>
        <div style="display: flex">
          <el-button
            type="primary"
            style="width: 200px; margin: 30px auto"
            @click.native.prevent="updateUserCenter"
          >保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  userCenterInfo,
  updateUserCenter
} from '@/api/user';
import { validPhone, validEmail } from '@/utils/validate';

export default {
  components: {},
  data() {
    return {
      userData: {}
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.userCenterInfo();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    /**
     * 查询个人中心信息
     */
    userCenterInfo() {
      userCenterInfo().then(
        res => {
          this.userData = res.data;
        }
      );
    },

    /**
     * 修改个人中心
     */
    updateUserCenter() {
      if (!validEmail(this.userData.email)) {
        this.$message({
          message: '请输入正确的邮箱',
          type: 'warning'
        });
        return;
      } else if (!this.userData.companyLinker) {
        this.$message({
          message: '请输入企业联系人',
          type: 'warning'
        });
        return;
      } else if (!validPhone(this.userData.companyLinkMobile)) {
        this.$message({
          message: '请输入正确的企业联系人手机号',
          type: 'warning'
        });
        return;
      }

      updateUserCenter(this.userData).then(res => {
        this.$message({
          message: '保存成功',
          type: 'success'
        });
        // this.$alert('保存成功', '提示', {
        // });
        this.userCenterInfo();// 重新获取信息
      });
    }

  }
};
</script>
<style lang='scss' scoped>
.me_bac {
  width: 500px;
  max-width: 100%;
  padding: 80px 35px 0;
  margin: 0 auto;
}
</style>
